<template>
    <div>
        <common-card
            title="累计用户数"
            :value="userToday"
        >
            <template>
                <v-chart :options="getOptions()"></v-chart>
            </template>
            <template v-slot:footer>
                <div class="total-users-footer">
                    <span>日同比</span>
                    <span class="emphasis">{{ userGrowthLastDay }}</span>
                    <div class="increase"></div>
                    <span class="month"> 月同比</span>
                    <span class="emphasis">{{ userGrowthLastMonth }}</span>
                    <div class="decrease"></div>
                </div>
            </template>
        </common-card>
    </div>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
import commonDataMixin from '@/mixins/commonDataMixin' //引入inject数据
export default {
    mixins: [commonCardMixin,commonDataMixin], //引入有公共特性的改为mixin方式引入，减少共用代码的编写
    methods: { 
        getOptions() { 
            return { 
                grid:{
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0
                },
                xAxis: {
                    type: 'value',
                    show: false
                },
                yAxis: {
                    type: 'category',
                    show: false
                },
                series: [{ 
                    name: '上月平台用户数',
                    type: "bar",
                    data: [this.userLastMonth],
                    barWidth: 10,
                    stack: '总量', //stack用于合并图表，一样名字的图表会叠到一起
                    itemStyle: {  //设置图表颜色
                        color: '#45c946'
                    }
                },{ 
                    name: '今日平台用户数',
                    type: "bar",
                    data: [this.userTodayNumber],
                    barWidth: 10,
                    stack: '总量',//stack用于合并图表，一样名字的图表会叠到一起
                    itemStyle: { 
                        color: '#eee'
                    }
                },{ 
                    type: "custom", //自定义类型图表
                    data: [this.userLastMonth],
                    stack: '总量',//stack用于合并图表，一样名字的图表会叠到一起
                    renderItem:(params, api) => { 
                        const value = api.value(0) //获取整个data中的第一号元素,这里就是得到200
                        const endPoint = api.coord([value,0]) //x轴传入200,y轴传入0
                        // console.log(endPoint) 这里发现endPoint的y轴坐标其实是25,那是因为我们对容器居中显示了，所以是25
                        return { 
                            type: 'group', //图形组
                            position: endPoint, //图形位置
                            children: [{ 
                                type: 'path', //图形
                                shape: { 
                                    d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',//向下箭头svg码
                                    x: -5, //x轴偏移量
                                    y: -20, //y轴偏移量
                                    width: 10, //图形宽
                                    height: 10, //图形高
                                    layout: 'cover'//缩放PathData,PathData拉伸为矩形的长宽比，完全填满矩形，不会超出矩形
                                },
                                style: { 
                                    fill: '#45c946' //填充颜色
                                }
                            },{ 
                                type: 'path', //图形
                                shape: { 
                                    d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',//向上箭头svg码
                                    x: -5, //x轴偏移量
                                    y: 10, //y轴偏移量
                                    width: 10, 
                                    height: 10,
                                    layout: 'cover'
                                },
                                style: { 
                                    fill: '#45c946'
                                }
                            }]
                        
                        }
                },
                }]
            }
        }
    }
};
</script>

<style lang="scss" scoped>
    .total-users-footer { 
        display: flex;
        align-items: center;
        .month {
            margin-left: 10px;
        }
    }
</style>